<script setup lang="ts">
import Detail from "./detail.vue";
import Month from "./month.vue";
import BaseCurve from "./baseCurve.vue";
import { useRouter, useRoute } from "vue-router";
import { Check, RefreshLeft } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import {
  getTradeRetailPlanDetail,
  addTradeRetailPlan,
  editTradeRetailPlan
} from "@/api/tradeRetailPlan";
import { ElMessage, ElNotification } from "element-plus";
const router = useRouter();
const route = useRoute();
const status = ref("");
const loading = ref(false);
const activeTradeRetailPlanId = ref("");
status.value = route.params.status;
activeTradeRetailPlanId.value = route.params.tradeRetailPlanId || "";
const form = reactive({
  data: {
    name: undefined,
    years: undefined,
    month: undefined,
    plusDeviationExemScale: undefined,
    plusDeviationExamRate: undefined,
    minusDeviationExemScale: undefined,
    minusDeviationExamRate: undefined,
    electricDeviation: undefined,
    nonExam: undefined,
    applicableObject: undefined,
    cancellationClause: undefined,
    status: 1
  },
  rules: {
    name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
    years: [{ required: true, message: "请输入套餐生效年", trigger: "blur" }],
    month: [{ required: true, message: "请输入套餐持续月份", trigger: "blur" }],
    plusDeviationExemScale: [
      { required: true, message: "请输入正偏差免考比例", trigger: "blur" }
    ],
    plusDeviationExamRate: [
      { required: true, message: "请输入正偏差考核费率", trigger: "blur" }
    ],
    minusDeviationExemScale: [
      { required: true, message: "请输入负偏差免考比例", trigger: "blur" }
    ],
    minusDeviationExamRate: [
      { required: true, message: "请输入负偏差考核费率", trigger: "blur" }
    ],
    electricDeviation: [
      { required: true, message: "请输入申报电量偏差", trigger: "blur" }
    ],
    nonExam: [{ required: true, message: "请输入免考核机制", trigger: "blur" }],
    applicableObject: [
      { required: true, message: "请输入适用对象", trigger: "blur" }
    ],
    cancellationClause: [
      { required: true, message: "请输入解约条款", trigger: "blur" }
    ],
    status: [{ required: true, message: "请选择当前状态", trigger: "change" }]
  }
});
const activeName = ref("first");

const getDetail = id => {
  if (id && id !== "null") {
    return new Promise(async (resolve, reject) => {
      let data = await getTradeRetailPlanDetail({ id: id });
      resolve(data);
    });
  } else {
    return false;
  }
};

const statusDict = [
  {
    value: 0,
    label: "未生效"
  },
  {
    value: 1,
    label: "生效"
  },
  {
    value: 2,
    label: "已失效"
  }
];
const dictList = reactive({
  data: {
    status: statusDict
  }
});
const detail = ref(null);
const submit = async () => {
  let bool = await detail.value.validateForm();
  if (bool) {
    let data = detail.value.getFormData();
    loading.value = true;
    if (status.value === "add") {
      if (
        activeTradeRetailPlanId.value &&
        activeTradeRetailPlanId.value !== "null" &&
        status.value === "add"
      ) {
        data.id = parseInt(activeTradeRetailPlanId.value);
        await editTradeRetailPlan(data);
        ElNotification({
          title: "系统提示",
          message: "套餐编辑成功",
          type: "success"
        });
      } else {
        let res = await addTradeRetailPlan(data);
        activeTradeRetailPlanId.value = res.id + "";
        ElNotification({
          title: "系统提示",
          message: "套餐创建成功",
          type: "success"
        });
      }
    } else {
      await editTradeRetailPlan(data);
      ElNotification({
        title: "系统提示",
        message: "套餐编辑成功",
        type: "success"
      });
    }
    loading.value = false;
  }
};
onMounted(async () => {
  if (status.value !== "add") {
    form.data = await getDetail(activeTradeRetailPlanId.value);
  }
  detail.value.setForm(form.data);
});
const reset = () => {
  detail.value.resetForm();
};
const beforeLeave = async (activeName, oldActiveName) => {
  let bool = await detail.value.validateForm();
  if (status.value === "add" && !bool) {
    // 校验未通过
    ElMessage({
      message: "请填写完整套餐信息并保存!",
      type: "error"
    });
    return false;
  }
  if (
    bool &&
    (!activeTradeRetailPlanId.value || activeTradeRetailPlanId.value === "null")
  ) {
    // 未保存
    ElMessage({
      message: "请先保存套餐信息",
      type: "error"
    });
    return false;
  }
  if (bool) {
    // if (activeName === "five") {
    //   if (!vppMapRef.value.map) {
    //     vppMapRef.value.showMap();
    //   } else {
    //     vppMapRef.value.echoMapData();
    //   }
    // }
  }
  form.data = await getDetail(activeTradeRetailPlanId.value);
  detail.value.setForm(form.data);
  return bool;
};
</script>

<template>
  <div v-loading="loading" class="main h-[calc(100%-29px)]">
    <el-card class="relative w-full">
      <div
        v-if="status !== 'look' && activeName === 'first'"
        class="absolute right-[20px] top-[20px] z-10"
      >
        <el-button :icon="RefreshLeft" size="small" @click="reset"
          >重置</el-button
        >
        <el-button :icon="Check" size="small" type="primary" @click="submit"
          >保存</el-button
        >
      </div>
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        :before-leave="beforeLeave"
      >
        <el-tab-pane label="套餐信息" name="first">
          <Detail
            ref="detail"
            :status="status"
            :dictList="dictList"
            :tradeRetailPlanId="activeTradeRetailPlanId"
          />
        </el-tab-pane>
        <el-tab-pane label="分时月段信息" name="second">
          <Month
            :status="status"
            :dictList="dictList"
            :tradeRetailPlanId="activeTradeRetailPlanId"
          />
        </el-tab-pane>
        <el-tab-pane label="基准曲线信息" name="third">
          <BaseCurve
            :status="status"
            :dictList="dictList"
            :tradeRetailPlanId="activeTradeRetailPlanId"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
